<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Profile</title>
	 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- bower:css -->
	<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../bower_components/components-font-awesome/css/fontawesome-all.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-fileinput/css/fileinput.min.css" />
	<link rel="stylesheet" href="../../bower_components/glyphicons/styles/glyphicons.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-offcanvas/dist/css/bootstrap.offcanvas.css" />
	<!-- endbower -->

	<!-- inject:css -->
	<link rel="stylesheet" href="../css/common.css">
	<!-- endinject -->
	<style type="text/css">
		.myarrow{
			color:#ccc;
		}
		.offcanvas-toggle .icon-bar {
		    background-color: #fff;
		}
		.navbar-toggle{
		  float: left;
		}
		.avatar-center{
			width:100%;
		}
		.nav-background{
			background-color: #333333;
		}
		.myfa {
			display:inline-block;
			top:27px;
			left:6px;
			position:relative;
			color:#ccc;
		}
		.navfa {
			float:left;
			top:18px;
			left:6px;
			position:relative;
			color:#ccc;
		}
		.btn-pos{
			display:inline-block;
			top:27px;
			position:relative;
		}
		input[type="text"],input[type="password"] {
			padding-left:26px;
		}

		.kv-avatar .krajee-default.file-preview-frame,.kv-avatar .krajee-default.file-preview-frame:hover {
			margin: 0;
			padding: 0;
			border: none;
			box-shadow: none;
			text-align: center;
		}
		.kv-avatar {
			display: inline-block;
		}
		
		.navbar-default .navbar-brand{
			color:#fff;
		}
		.avatarsize{
			width:80px;
			height:80px;
		}


	</style>
</head>
<body>
<!-- bower:js -->
<script src="../../bower_components/jQuery/dist/jquery.js"></script>
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="../../bower_components/bootstrap-offcanvas/dist/js/bootstrap.offcanvas.js"></script>
<!-- endbower -->

<!-- inject:js -->
<script src="../js/index.js"></script>
<!-- endinject -->

<div class="container">
	<header class="clearfix">
        <button type="button" class=" navbar-toggle offcanvas-toggle " data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" id="offcanvas-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <nav class="nav-background navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
            <div class="container-fluid">
                <div class="navbar-header">
                    <i class="fa navfa fa-edit fa-lg"></i> <a class="navbar-brand" href="makePost.html">Post</a>
                </div>
                <div class="navbar-header">
                    <i class="fa navfa fa-home fa-lg"></i> <a class="navbar-brand" href="posts.html">Home</a>
                </div>
                <div class="navbar-header">
                    <i class="fa navfa fa-user fa-lg"></i><a class="navbar-brand" href="info.html">Profile</a>
                </div>
                 <div class="navbar-header">
                    <i class="fa navfa fa-sign-out-alt fa-lg"></i><a class="navbar-brand" href="login.html">Logout</a>
                </div>
            </div>
        </nav>
        
    </header>
	<div class="row">
		<form class="col-sm-6  col-sm-offset-3 " action="../php/info.php" method="POST" enctype='multipart/form-data'>
			<div class="avatar-center">
				<div class="kv-avatar">
						<div class="file-loading">
							<input id="avatar" name="avatar" type="file">
						</div>
				</div>
				<div class="kv-avatar float-right" >
						<img id="myavatar" class="avatarsize" src="../img/avatar.png"/>
				</div>
			</div>
			<div>
				<i class="fa myfa fa-user fa-lg"></i>
				<input class="form-control" readonly required type="text" placeholder="Name" name="username" id="name" autofocus="autofocus" maxlength="20"/>
			</div>
			<div>
				<i class="fa myfa fa-neuter fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Gender" id="gender" name="gender"  maxlength="20"/>
			</div>
			
			<div>
				<i class="fa myfa fa-gift fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Birthday" id="birthday" name="birthday" maxlength="28"/>
			</div>
			<div>
				<i class="fa myfa fa-envelope fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Email" id="email" name="email"  maxlength="20"/>
			</div>
			
			<div>
				<i class="fa myfa fa-address-card fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Address" id="address" name="address"  maxlength="20"/>
			</div>

			<div>
				<center><input type="submit" class="btn-pos btn btn-primary btn-lg btn-block btn-circle" value="Save "/></center>
			</div>

		</form>
	</div>


</div>
<script>

$("#avatar").fileinput({
	overwriteInitial: true,
	    showClose: false,
	    showCaption: false,
	    showBrowse: true,
	    showUpload:false,
	    showDownload:false,
	    showPreview:true,
	    uploadAsync:false,
	    browseOnZoneClick: true,
	    maxFileSize:0,
	    enctype:'multipart/form-data',
	    removeLabel: '',
	    removeTitle: 'Cancel or reset changes',
	    msgErrorClass: 'alert alert-block alert-danger',
	    defaultPreviewContent: '<img src="../img/avatar.png" alt="Your Avatar"><h6 class="text-muted">Click to select</h6>',
	    allowedFileExtensions: ["jpg", "png", "gif",'jpeg']
});
    
    $(function(){
    	$.ajax({
			  type: "POST",
			  url: "../php/getinfo.php",
			  data: {},
			  success: function(data){
				  console.log(data);
				  //var comments = eval('(' + data + ')');
				  if(data[1] != null){
				  	$("#myavatar").attr("src","../img/"+data[1]);
				  	$("#name").val(data[2]);
				  	$("#gender").val(data[6]);
				  	$("#birthday").val(data[5]);
				  	$("#email").val(data[3]);
				  	$("#address").val(data[7]);
				  }
				  
			  },
			  dataType: "json",
			  async:true
			});
    });

</script>
</body>
</html>
